<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03猜数字</title>
</head>
<body>
<button onclick="alert('警告信息')">测试警告框</button>
<button onclick="confirm('您确认要关闭吗？')">测试确认框</button>
<button onclick="prompt('请输入你的设备码')">测试输入框</button>
<hr>
<h3>已生成一个1~100之间的随机数：</h3>
<input type="text" placeholder="请输入你猜的数字">
<button onclick="guess()">点我验证</button>
<h3>小提示: <span></span> </h3>

<script>
    //1.生成1~100之间的随机整数
    //Math.random()生成[0,1)之间的随机小数
    // [0,100)+1=[1,101)
    let r = parseInt(Math.random()*100)+1;
    console.log('打个小抄吧：'+r);
    //7.在函数外定义变量用来保存统计的次数
    let count = 0;
    //2.定义函数,点击按钮时调用
    function guess(){
        //3.获取用户输入的数字
        let n = document.querySelector('input').value;
        //4.判断是否为非数字，如果是非数字，直接结束函数
        if(isNaN(n)){
            alert('请输入数字！');
            return;
        }
        //5.获取用来显示结果的span元素
        let spanE = document.querySelector('span');
        //8.每次比较，统计的次数+1
        count++;
        //6.将用户输入的数字与随机数做比较
        if(n>r){
            spanE.innerHTML='猜大了！';
        }else if(n<r){
            spanE.innerHTML='猜小了！';
        }else{
            spanE.innerHTML='恭喜你用了'+count+'次就猜对了！';
        }
    }

</script>
</body>
</html>